<template>
	<!-- 报修工单详情-编辑 -->
	<view class="wrap">
		<view class="fault-reason">
			<text>故障设备</text>
			<u-radio-group style="margin-left: 30rpx;" v-model="fault">
				<u-radio v-for="(item, index) in faultDevice" :key="index" :name="item.name" :disabled="item.disabled">
					{{ item.label }}
				</u-radio>
			</u-radio-group>
		</view>
		<u-line></u-line>
		<view class="fault-detail">
			<text>故障原因</text>
			<u-tag 
				style="margin:20rpx" 
				v-for="(item,index) in faultList" :key="index"
				:index="item.id"
				:text="item.name" :mode="item.mode" shape="circle"
				@click="faultTagClick"
				:bg-color="item.color"
				:color="item.textColor"
				 ></u-tag>
		</view>
		<view class="fault-pics">
			<view>拍照</view>
			<view class="pics">
				<view  v-for="(item,index) in picList" :key="index">
					<grid-pic :imgSrc="item.picUrl" :picType="item.type" @deleteImg="imgDelete"></grid-pic>
				</view>
			</view>
		</view>
		<view class="fault-content">
			<u-input v-model="textValue" type="textarea" :border="true" :height="200" :auto-height="true" />
		</view>
		<button></button>
	</view>
</template>

<script>
	import gridPic from '@/components/grid-pic.vue'
	export default{
		components:{
			gridPic,
		},
		data(){
			return{
				fault:'1',
				faultDevice:[
					{
						name: '1',
						disabled: false,
						label:'屏幕'
					},
					{
						name: '2',
						disabled: false,
						label:'机顶盒'
					},
					{
						name: '3',
						disabled: false,
						label:'全部'
					},
				],
				faultList:[
					{
						id:0,
						name:'接触不良',
						mode:'plain',
						color:'#ffffff',
						textColor:'#333333',
					},
					{
						id:1,
						name:'保险脱离',
						mode:'plain',
						color:'#ffffff',
						textColor:'#333333',
					},
					{
						id:2,
						name:'电源脱离',
						mode:'plain',
						color:'#ffffff',
						textColor:'#333333',
					},
					{
						id:3,
						name:'视频头脱离',
						mode:'plain',
						color:'#ffffff',
						textColor:'#333333',
					},
					{
						id:4,
						name:'无信号',
						mode:'plain',
						color:'#ffffff',
						textColor:'#333333',
					},
					{
						id:5,
						name:'+其他原因',
						mode:'plain',
						color:'#ffffff',
						textColor:'#333333',
					},
				],
				selectFault:[],
				picList:[
					{
						picUrl:'https://szsszhlsit1.obs.cn-north-4.myhuaweicloud.com:443/dr-prd%2Fconsole%2Ffile%2F7bce4e0b-a72c-46d0-b4d4-70c61a6299e9.jpg',
						type:0
					},
					{
						picUrl:'https://szsszhlsit1.obs.cn-north-4.myhuaweicloud.com:443/dr-prd%2Fconsole%2Ffile%2F4380cc42-5c3f-4639-a663-802d6ee97b86.jpg',
						type:0
					},
					{
						picUrl:'https://szsszhlsit1.obs.cn-north-4.myhuaweicloud.com:443/dr-prd%2Fconsole%2Ffile%2F48c9f8f1-f3a7-4c9c-840a-3873e4669f13.png',
						type:0
					},
					{
						picUrl:'',
						type:1
					}
				],
				textValue:'',
			}
		},
		methods:{
			faultTagClick(index){
				console.log('faultTagClick',index)
				if(this.selectFault.includes(index)){
					this.selectFault.splice(this.selectFault.findIndex(item=>item===index),1)
				}else{
					this.selectFault.push(index)
				}
				this.faultList.map((item)=>{
					if(this.selectFault.includes(item.id)){
						item.mode = 'light'
						item.color = '#2979ff'
						item.textColor = '#ffffff'
					}else{
						item.mode = 'plain'
						item.color = '#ffffff'
						item.textColor = '#333333'
					}
				})
			},
			imgDelete(val){
				this.picList.splice(this.picList.findIndex(item=>item===val),1)
			}
		}
		
	}
</script>

<style scoped lang="scss">
	.wrap{
		display: flex;
		flex-direction: column;
		padding: 0 30rpx;
		.fault-reason{
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top: 20rpx;
		}
		.fault-detail{
			margin-top: 30rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			flex-wrap: wrap;
		}
		.fault-pics{
			display: flex;
			flex-direction: row;
			.pics{
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
			}
		}
	}
	
</style>
